<template>
  <div id="app">
      <nav>
        <span @click="componentsName='Book'">图书</span>
        <span @click="componentsName='Movies'">电影</span>
        <span @click="componentsName='Team'">小组</span>
      </nav>
      <keep-alive include="Book">
        <component :is="componentsName"></component>
      </keep-alive>
  </div>
</template>

<script>
import Movies from '@/components/Movies'
import Book from '@/components/Book'
import Team from '@/components/Team'
export default {
  name: 'App',
  components:{
    Movies,
    Book,
    Team
  },
  data(){
    return {
      componentsName:'Book'
    }
  }
}
</script>

<style lang="scss">

</style>
